<!-- 驿站选择器 -->
<template>
  <div>
    <el-select
        style="width: 200px;"
        v-model="currentFacilityId"
        placeholder="请选择驿站"
        clearable
        @change="facilityIdChange"
      >
        <el-option v-for="item in facilityList" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
  </div>
</template>

<script setup lang="ts">
import { getFacilityList } from '@/api/yz/facility-summary/index'

const props = defineProps({
  facilityId: {
    type: Number,
    default: null
  }
})

watch(()=> props.facilityId,
() => {
  if(props.facilityId) {
    currentFacilityId.value = Number(props.facilityId)
  }
})

const emit = defineEmits(['update:facilityId'])

const facilityIdChange = () => {
  emit('update:facilityId', currentFacilityId.value)
}

onMounted(()=>{
  if(props.facilityId) {
    currentFacilityId.value = props.facilityId
  }
})

// 当前选中的驿站
const currentFacilityId = ref()

// 设施列表数据
const facilityList = ref([])

// 加载设施列表数据
const loadFacilityList = async() => {
  try {
    const res = await getFacilityList()
    facilityList.value = res
  } catch (error) {
    console.log(error)    
  }
} 

onMounted(loadFacilityList)
</script>

<style scoped>

</style>